import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { intl } from '../../../intl/intl'

import { changeTheme } from '../../../redux/actions/appAction'

import {
  setChartInterval, setStockChartType,
  K_INTERVAL_REAL_TIME, K_INTERVAL_ONE_MINUTE, K_INTERVAL_ONE_HOUR,
  STOCK_CHART_ORIGINAL_VIEW, STOCK_CHART_TRADING_VIEW
} from '../../../redux/actions/tradeChartAction'
import Button from '../../../component/button/Button'
import Select from '../../../component/select/Select'

import themeHOC from '../../common/themeHOC'

import TradingView from './tradingview/TradingView'
import OriginalView from './original/OriginalView'

import { minuteIntervalKeys, hourIntervalKeys, otherIntervalKeys, minuteSelectDataSource, hourSelectDataSource } from './intervals'
import { THEME } from '../../../constants/constants'

import './chart.less'

const candleStickStyleKeys = [
  'solid', 'stroke', 'up_stroke', 'down_stroke', 'ohlc'
]

const candleStickStyles = {
  solid: { icon: 'icon-candle-stick-solid', text: intl('all_solid') },
  stroke: { icon: 'icon-candle-stick-stroke', text: intl('all_stroke') },
  up_stroke: { icon: 'icon-candle-stick-up-stroke', text: intl('up_stroke') },
  down_stroke: { icon: 'icon-candle-stick-down-stroke', text: intl('down_stroke') },
  ohlc: { icon: 'icon-candle-stick-ohlc', text: intl('american_line') }
}

@connect(state => {
  return {
    currentInterval: state.trade.chart.get('currentInterval'),
    stockChartType: state.trade.chart.get('stockChartType')
  }
}, dispatch => {
  return bindActionCreators({
    changeTheme, setChartInterval, setStockChartType
  }, dispatch)
})
@themeHOC
class Chart extends Component {
  /**
   * 指标按钮点击事件
   */
  indicatorClick = () => {
    const { stockChartType } = this.props
    if (stockChartType === STOCK_CHART_ORIGINAL_VIEW) {
      if (this.originalView) {
        this.originalView.showTechnicalIndicator()
      }
    } else {
      if (this.tradingView) {
        this.tradingView.showIndicatorDialog()
      }
    }
  }

  /**
   * 设置按钮点击事件
   */
  settingClick = () => {
    const { stockChartType } = this.props
    if (stockChartType === STOCK_CHART_ORIGINAL_VIEW) {
      if (this.originalView) {
        this.originalView.showSettingDialog()
      }
    } else {
      if (this.tradingView) {
        this.tradingView.showSettingDialog()
      }
    }
  }

  render () {
    const {
      theme, currentInterval, stockChartType,
      changeTheme, setChartInterval, setStockChartType
    } = this.props
    const isMinuteSelected = minuteIntervalKeys.indexOf(currentInterval) > -1
    const isHourSelected = hourIntervalKeys.indexOf(currentInterval) > -1
    return (
      <div className={`trade-chart-${theme}`}>
        <div className="trade-column-content-title trade-chart-title-container">
          <div className="trade-chart-title-content-container">
            <span
              datatype={currentInterval === K_INTERVAL_REAL_TIME ? 'selected' : ''}
              className="trade-chart-title-k-interval"
              onClick={() => { setChartInterval(K_INTERVAL_REAL_TIME) }}>
              {intl(K_INTERVAL_REAL_TIME)}
            </span>
            <div className="trade-chart-title-k-interval-unfold-container">
              {
                minuteIntervalKeys.map(key => {
                  return (
                    <span
                      key={key}
                      datatype={key === currentInterval ? 'selected' : ''}
                      className="trade-chart-title-k-interval"
                      onClick={() => { setChartInterval(key) }}>
                      {intl(key)}
                    </span>
                  )
                })
              }
              {
                hourIntervalKeys.map(key => {
                  return (
                    <span
                      key={key}
                      datatype={key === currentInterval ? 'selected' : ''}
                      className="trade-chart-title-k-interval"
                      onClick={() => { setChartInterval(key) }}>
                      {intl(key)}
                    </span>
                  )
                })
              }
            </div>
            <div className="trade-chart-title-k-interval-select-container">
              <Select
                theme={theme}
                showKey="text"
                value={isMinuteSelected ? intl(currentInterval) : intl(K_INTERVAL_ONE_MINUTE)}
                className={`trade-chart-title-select ${isMinuteSelected && 'trade-chart-title-select-selected'}`}
                textContainerClassName="trade-chart-title-select-text-container"
                arrowClassName="trade-chart-title-select-arrow"
                dropDownRowClassName="trade-chart-title-select-drop-down-row"
                dataSource={minuteSelectDataSource}
                onDataSelected={(data) => { setChartInterval(data.key) }}/>
              <Select
                theme={theme}
                showKey="text"
                value={isHourSelected ? intl(currentInterval) : intl(K_INTERVAL_ONE_HOUR)}
                className={`trade-chart-title-select ${isHourSelected && 'trade-chart-title-select-selected'}`}
                textContainerClassName="trade-chart-title-select-text-container"
                arrowClassName="trade-chart-title-select-arrow"
                dropDownRowClassName="trade-chart-title-select-drop-down-row"
                dataSource={hourSelectDataSource}
                onDataSelected={(data) => { setChartInterval(data.key) }}/>
            </div>
            {
              otherIntervalKeys.map(key => {
                return (
                  <span
                    key={key}
                    datatype={key === currentInterval ? 'selected' : ''}
                    className="trade-chart-title-k-interval"
                    onClick={() => { setChartInterval(key) }}>
                    {intl(key)}
                  </span>
                )
              })
            }
            <i className="trade-chart-title-split-line"/>
            {
              stockChartType === STOCK_CHART_ORIGINAL_VIEW &&
              [
                <Select
                  theme={theme}
                  key="candle_stick_style"
                  className="trade-chart-title-select"
                  textContainerClassName="trade-chart-title-select-text-container"
                  arrowClassName="trade-chart-title-select-arrow"
                  dropDownContainerClassName="trade-chart-title-select-drop-down-container"
                  dropDownRowClassName="trade-chart-title-select-drop-down-row"
                  dataSource={candleStickStyleKeys}
                  defaultValue="solid"
                  renderValue={(value) => <i style={{ fontSize: 16 }} className={candleStickStyles[value].icon}/>}
                  renderDropDownRow={
                    data => [
                      <i key="icon" style={{ fontSize: 16 }} className={candleStickStyles[data].icon}/>,
                      <span key="text" style={{ paddingLeft: 10 }}>{candleStickStyles[data].text}</span>
                    ]
                  }
                  onDataSelected={data => {
                    if (this.originalView) {
                      this.originalView.setCandleStickStyle(data)
                    }
                  }}
                />,
                <i key="candle_stick_select_split_line" className="trade-chart-title-split-line"/>
              ]
            }
            {
              stockChartType === STOCK_CHART_ORIGINAL_VIEW &&
              [
                <Select
                  theme={theme}
                  key="candle_stick_technical_indicator"
                  className="trade-chart-title-select"
                  textContainerClassName="trade-chart-title-select-text-container"
                  arrowClassName="trade-chart-title-select-arrow"
                  dropDownContainerClassName="trade-chart-title-select-drop-down-container"
                  dropDownRowClassName="trade-chart-title-select-drop-down-row"
                  defaultValue="MA"
                  dataSource={['MA', 'BOLL', 'SAR', 'NO']}
                  onDataSelected={data => {
                    if (this.originalView) {
                      this.originalView.setCandleTechnicalIndicatorType(data)
                    }
                  }}/>,
                <i
                  key="candle_stick_technical_indicator_select_split_line"
                  className="trade-chart-title-split-line"/>
              ]
            }
            <i className="icon-technical-indicator trade-chart-title-icon" onClick={this.indicatorClick}/>
            {stockChartType === STOCK_CHART_TRADING_VIEW && <i className="icon-setting trade-chart-title-icon" onClick={this.settingClick}/>}
            {
              stockChartType === STOCK_CHART_ORIGINAL_VIEW &&
              <i
                className="icon-screen-shot trade-chart-title-icon"
                onClick={() => { this.originalView.screenShot() }}/>
            }
          </div>
          <div className="trade-chart-title-content-container">
            <Button
              datatype={stockChartType === STOCK_CHART_ORIGINAL_VIEW ? 'selected' : ''}
              className="trade-chart-stock-type-btn"
              onClick={() => { setStockChartType(STOCK_CHART_ORIGINAL_VIEW) }}>
              {intl('original')}
            </Button>
            <Button
              datatype={stockChartType === STOCK_CHART_TRADING_VIEW ? 'selected' : ''}
              className="trade-chart-stock-type-btn"
              onClick={() => { setStockChartType(STOCK_CHART_TRADING_VIEW) }}>
              {intl('professional')}
            </Button>
            <i
              className={`${theme === THEME.DAY ? 'icon-moon' : 'icon-sun'} trade-chart-title-icon trade-chart-title-icon-theme`}
              onClick={changeTheme}/>
          </div>
        </div>
        {stockChartType === STOCK_CHART_ORIGINAL_VIEW && <OriginalView onRef={(el) => { this.originalView = el }}/>}
        {stockChartType === STOCK_CHART_TRADING_VIEW && <TradingView onRef={(el) => { this.tradingView = el }}/>}
      </div>
    )
  }
}

export default Chart
